<template>
  <div>
    <p>函数式组件</p>
    <Functional :name="`hello ${name}`" @click="log">click here</Functional>
    <functional-button>按钮-单文件</functional-button>
    <render-button :show="isShow">
      <h3>函数式组件</h3>
      <p>可以显示了</p>
    </render-button>
    <temp-val :var1="`do ${name}`">
      <template v-slot="{ var1 }">
        {{ var1 }}
      </template>
    </temp-val>

    <Functional2 @click="log()">click me</Functional2>

    <Functional3 class="footerBtn">
      zero
      <template v-slot:foo> first </template>
      <p>second</p>
      <p>third</p>
    </Functional3>
  </div>
</template>

<script>
import Functional from "./Functional";
import FunctionalButton from "./FunctionalButton";
import RenderButton from "./RenderButton";
// import Functional2 from './Functional2.js'
// import Functional3 from './Functional3.js'
// import TempVal from './TempVar'

export default {
  components: {
    Functional,
    FunctionalButton,
    RenderButton,
    // TempVal,
    // Functional2,
    // Functional3
  },
  data() {
    return {
      name: "vue",
      isShow: true,
    };
  },
  methods: {
    log() {
      console.log("good day!");
    },
  },
};
</script>